<template>
  <div>
    <BackBtn/>
    <div class="title">卡券列表</div>
    <van-tabs v-model="active">
      <van-tab title="可使用"><div class="text">暂无该类券</div></van-tab>
      <van-tab title="已使用"><div class="text">暂无该类券</div></van-tab>
      <van-tab title="已失效"><div class="text">暂无该类券</div></van-tab>
      <van-tab title="已转赠"><div class="text">暂无该类券</div></van-tab>
      <van-tab title="兑换记录"><div class="text">暂无兑换记录</div></van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
};
</script>

<style lang="less" scoped>
.title {
    height: 50px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e8e7e7;
}
.text {
    width: 100%;
    height: 400px;
    margin: 200px auto;
    text-align: center;
    color: #666666;
}
</style>

<style>
.van-tabs__line {
  background-color: #143ea9;
}
</style>